<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="utf-8"/>
    <title>仓库管理系统</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style>
        .container {
            display: table;
            position: absolute;
            height: 100%;
        }

        .row {
            display: table-cell;
            vertical-align: middle;
        }
    </style>

    <script>
        function login_click() {               //id为login的按钮被按下就执行
            var uid = $("#userid").val();
            var pwd = $("#password").val();
            if (uid == "" || pwd == "") {
                alert("用户名和密码请填写完整");
            } else {
                $.ajax({
                    type: "POST",
                    url: "1.2LoginCheck.php",
                    dataType: "json",
                    data: {
                        userid: uid,
                        password: pwd
                    },
                    success: function (responseText) {
                        if (responseText.loginStatus == '登陆成功') {
                            window.location.href = "main.php"
                        } else {
                            alert(responseText.loginStatus);
                        }
                    }
                });
            }
        }

        function reset_click() {
            history.go(0);
        }

        //如果用json传输数据，eval(字符串参数) 可以将字符串参数变为表达式运行
        //var res = xhr.responseText;
        //eval("var obj=" + res);即可将res这段json文本变为obj这个对象
    </script>
</head>

<body style="background: url('img/bg.jpg')">
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-5">
            <div class="panel-primary">
                <div class="panel-heading text-center">
                    <h2>登录服装多门店库存管理系统</h2>
                </div>
                <div class="panel-body" style="child-align: middle">
                    <div class="row">
                        <div class="col-md-12 col-md-offset-3">
                            <span class="input-lg">
                                <span class="glyphicon glyphicon-user"></span>
                            </span>
                            <input type="text" id="userid" name="userid" class="input-lg" placeholder="用户名">
                        </div>
                    </div>
                    <hr/>
                    <div class="row">
                        <div class="col-md-12 col-md-offset-3">
                            <span class="input-lg">
                                <span class="glyphicon glyphicon-lock"></span>
                            </span>
                            <input type="password" id="password" name="password" class="input-lg" placeholder="密码">
                        </div>
                    </div>
                    <hr/>
                    <div class="col-md-offset-3">
                        <button type="button" id="login" class="btn btn-lg btn-success" onclick="login_click()"
                                style="margin-right: 30%">登录
                        </button>
                        <button type="button" id="reset" class="btn btn-lg btn-danger" onclick="reset_click()">重置
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-footer" style="text-align: center">
                服装多门店管理系统——CS1701
            </div>
        </div>
    </div>
</div>
</div>
</body>

</html>
